<template>
	<div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect, defineEmits } from "vue";
import { pxToRem } from "@/utils/index";
import { start } from "repl";
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { color } from "echarts";
import { he } from "element-plus/es/locale";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
		type: Object,
		default: () => { },
	},
});
// 数据定义
const chartsData = reactive<any>({
	legendData: [],
	xAxisData: [],
	yAxisData: [],
	seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogData'])
// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;
let legendSty = props.housingSupplyStatsData.legendStyle;
let gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
	if (echartDom.value && props.housingSupplyStatsData.legendStyle) {
		myChart.value = echarts.init(echartDom.value);
		// 提示框文字样式
		const tooltipTextStyle = {
			color: "#fff",
			fontSize: pxToRem(14),
		};

		// 提示框背景
		const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";
		// 图例配置
		const legendStyle = {
			show: legendSty.show,
			icon: legendSty.icon,
			left: 'center',
			right: pxToRem(legendSty.right),
			top: typeof legendSty.top == "number" ? pxToRem(legendSty.top) : legendSty.top,
			bottom: pxToRem(legendSty.bottom),
			itemWidth: pxToRem(legendSty.itemWidth),
			itemHeight: pxToRem(legendSty.itemHeight),
			itemGap: pxToRem(legendSty.itemGap),
			textStyle: {
				color: "#fff",
				fontSize: pxToRem(14),
				rich: {},
				padding: [0, 0, pxToRem(-3), 0],
			},
			data: chartsData.legendData,
		};

		// 网格区域
		const gridConfig = {
			left: pxToRem(gridSty.left),
			right: pxToRem(gridSty.right),
			bottom: pxToRem(gridSty.bottom),
			top: pxToRem(gridSty.top),
			containLabel: true,
		};

		// x轴配置
		const xAxisConfig = {
			boundaryGap: true,
			offset: pxToRem(5),
			axisLine: {
				show: true,
				lineStyle: {
					color: 'rgba(40, 252, 255, 1)'
				}
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				textStyle: {
					color: "#FFFFFF",
					fontSize: pxToRem(12),
				},
			},
			data: chartsData.xAxisData,
		};
		// y轴配置
		const yAxisConfig = chartsData.yAxisData.map((item: any, index: any) => ({
			type: "value",
			name: item.name,
			nameTextStyle: {
				color: "#959699",
				fontSize: pxToRem(14),
				padding: [0, 0, 0, 0],
				align: index == 0 ? 'left' : 'right',
			},
			splitLine: {
				show: item.type == 2 ? false : true,
				lineStyle: {
					color: "#31679C",
					type: "dashed",
				},
			},
			axisLabel: {
				formatter: "{value}",
				fontSize: pxToRem(12),
			},
		}));
		// 数据项配置
		const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
			name: chartsData.legendData[index],
			type: typeData[index].name,
			barWidth: '20%', // 设置为类目宽度的50%
			data: data,
			symbol: "none",
			smooth: true,
			stack: 'total',
			yAxisIndex: typeData[index].type == 2 ? 1 : 0,
			areaStyle:
				typeData[index].areaStyleType == 2
					? {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: colors[index].a, // 0% 处的颜色
								},
								{
									offset: 1,
									color: colors[index].b, // 100% 处的颜色
								},
							],
						},
					}
					: null,
			itemStyle: {
				color: {
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					type: "linear",
					global: false,
					colorStops: [
						{
							offset: 0,
							color: colors[index].a,
						},
						{
							offset: 1,
							color: colors[index].b,
						},
					],
				},
			},
		}));
		// 渲染图表数据
		const option = {
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "line",
				},
				position: function (point: any[], params: any, dom: any, rect: any, size: any) {
					return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
				},
				textStyle: tooltipTextStyle,
				backgroundColor: tooltipBackgroundColor,
				borderColor: '#66FFFF', // 设置边框颜色为红色
				borderWidth: 1, // 设置边框宽度
			},
			legend: legendStyle,
			grid: gridConfig,
			xAxis: xAxisConfig,
			yAxis: yAxisConfig,

			series: seriesConfig,
		};
		myChart.value.setOption(option);
		myChart.value.getZr().on("click", (params) => {
			emit('dialogData', option)
		});
	}
};
const updateChart = () => {
	if (myChart.value) {
		myChart.value.dispose(); // 销毁旧图表实例
	}
	chartsData.legendData = props.housingSupplyStatsData.legendData;
	chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
	chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
	chartsData.seriesData = props.housingSupplyStatsData.seriesData;
	colors = props.housingSupplyStatsData.colors;
	typeData = props.housingSupplyStatsData.typeData;
	legendSty = props.housingSupplyStatsData.legendStyle;
	gridSty = props.housingSupplyStatsData.gridConfig;
	getEchart();
};

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
